<template>
	<view class="page-wraper">
		<customNav style="padding-top: 20px;" title1="所属公司认证" titleColor="#000026" bgColor="white" :backIcon="true" backIconColor="black"></customNav>
		<view class="bkg" >
			<view  v-if="examine < 3" class="review_status">
				{{reviewStatus}}
			</view>
			<view style="height: 10px;"></view>
			<view class="" style="background-color: white; height:auto;">
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="width: 80px;">
							* 企业名称
						</view>
						<view class="cell_right" style="flex: 1;">
							<input 
							:disabled="pageType == 1"
							v-model="companyName" 
							type="text" 
							class="input_text" 
							placeholder="请输入营业执照公司全称" 
							placeholder-class="placeholder_text" 
							style="text-align: right;">
						</view>
					</view>
					<view class="cell_line"></view>
				</view>
				
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="width: 80px">
							* 公司地址
						</view>
						<view @click="getLocation()" class="cell_right" style="align-items: center;justify-content: flex-end; flex: 1; flex-direction: row; display: flex;">
							<textarea v-model="locationName" 
							  disabled
							  class="input_text" 
							  placeholder="请定位公司地址" 
							  placeholder-class="placeholder_text" 
							  style="margin-right: 10px; text-align: right; width:80%"
							  auto-height />

							
							<!-- <input v-model="locationName" 
							disabled="true" 
							class="input_text" 
							placeholder="请定位公司地址" 
							placeholder-class="placeholder_text" 
							style="margin-right: 10px; text-align: right; flex:1"> -->
							<image class="location_icon" src="/static/auth_location.png" mode=""></image>
						</view>
					</view>
					<view class="cell_line"></view>
				</view>
				
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="width: 80px;">
							<text style="margin-left: 10px">地址补充</text>
						</view>
						<view class="cell_right" style="flex:1">
							<input :disabled="pageType == 1" 
							v-model="locationAddress_suplement" 
							type="text" 
							:placeholder="pageType == 1 ? '' : '请输入'" 
							class="input_text" 
							placeholder-class="placeholder_text" 
							style="text-align: right;">
						</view>
					</view>
					<view class="cell_line"></view>
				</view>
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="flex:1;">
							<text style="margin-left: 10px">职位</text>
						</view>
						<view @click="getJobTitle('showRight')" class="cell_right" style="">
							<input v-model="jobTitle" type="text" class="input_text" disabled="false" placeholder="销售经理" placeholder-="placeholder_text" style="text-align: right;">
						</view>
					</view>
				</view>
			</view>
			
				<uni-drawer ref="showRight" mode="right" :mask-click="true" @change="change($event,'showRight')">
					<view class="scroll-view">
						<scroll-view class="scroll-view-box" scroll-y="true">
							<view class="drawer-title">
								选择职位
							</view>
							<view @click="selectedJob(item)" class="info-content" v-for="item in jobList.length" :key="item">
								<text>{{jobList[item-1].name}}</text>
							</view>
							<view class="job-custom">
								<input v-model="customJobTitle" class="info-content" placeholder="自定义">
								<view v-if="customJobTitle.length > 0" @click="enterCustomJob()" class="job-custom-btn">确定</view>
							</view>
						</scroll-view>
					</view>
				</uni-drawer>
			
			
			<view class="" style="background-color: white; margin-top: 10px; height:auto; ">
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="flex:1;">
							* 营业执照
						</view>
					</view>
					
					<!-- v-if="pageType == 1" -->
					<image v-if="pageType == 1" :src="coverUrl" class="itemImg" mode="aspectFill"></image>
					<!--  v-if="pageType == 0 || pageType == 2" -->
					<jade-image-upload  v-if="pageType == 0 || pageType == 2" class="license_img" :list="media" :control="control" :columnType="columnType" :maxCount="maxCount"
						:maxListShowCount="maxListShowCount" :compressSize="compressSize" :compressQuality="compressQuality"
						:compressWidth='compressWidth' :imageSize="imageSize" :sourceType="sourceType" @chooseFile="chooseFile"
						@imgDelete="mediaDelete">
					</jade-image-upload>
				</view>
			</view>
			
			<view v-if="examine > 0" class="enter_btn center" @click="enter(pageType)">
				{{enterText}}
			</view>
		</view>
	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import {addCompany, getPosition, getCompanyInfo} from '@/api/user.js'
	
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				//上传图片相关变量
				control: true,
				columnType: 'other',
				maxCount: 1,
				maxListShowCount: 1,
				compressSize: 30,
				imageSize: 30,
				compressQuality: 0.8,
				compressWidth: 375,
				sourceType: ['album'],
				imageID: 0,
				uploadTask: null,
				media: [], //数据源
				
				//
				userId: '',
				jobTitle: '销售经理',
				customJobTitle:'',
				showCustomEnter: false,
				cover: '',
				coverUrl: '',
				
				companyName: '',
				location: {},
				locationName: '',
				locationAddress: '',
				locationAddress_suplement: '',
				
				// 抽屉
				showRight: false,
				// 职位信息
				jobList: [],
			
				pageType: 0,	//页面类型 0：新增，1：查看，2: 编辑
				enterText:"",		
				reviewStatus: "",
				examine: 0,
			}
		},
		onLoad() {
			
			try{
				const value = uni.getStorageSync('login');
				this.userId = value.id
				this.getCompanyAuthInfo()
				
			}catch(e){
				//TODO handle the exception
			}
			
			getPosition()
			.then(res => {
				this.jobList = res.data
			})
		},
		methods: {

			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			
			
			/**
			 {
			     "users_id":"510E9895-4D7E-6007-ADEB-8932689F7BFE",
			     "company_name":"测试公司",
			     "company_address":"天津市滨海信息某某地方",
			     "address_supplement":"",
			     "long":"131.22222",
			     "lat":"171.222222",
			     "position":"经理",
			     "cover_url":"/admin/202303/742245141c33efb786cf86ed579fcffd.jpg",
			     "city":"天津",
			     "is_update":"0"
			 }
			 */
			
			getCompanyAuthInfo() {
				getCompanyInfo(this.userId)
				.then(res => {
					let data = res.data
					if (data.length == 0) {
						this.pageType = 0;	
						this.examine = 3  //新增查看
					} else {
						this.pageType = 1;	//查看
						this.companyName = data.company_name
						this.locationName = data.company_address
						this.locationAddress = data.accurate_address
						this.locationAddress_suplement = data.address_supplement
						this.longitude = data.long
						this.latitude = data.lat
						this.jobTitle = data.position
						// this.coverUrl = data.cover_url
						this.coverUrl = data.cover
						this.cover = data.cover
						this.city = data.city
						
						
						this.media = [{"src":this.coverUrl,
							"percent":100,
							"index":"0"}]
							
						let examine = data.examine
						this.examine = examine
						if (examine == 0) {
							this.reviewStatus = '公司认证审核中'
						} else if (examine == 1) {
							this.reviewStatus = '您已通过公司认证'
						} else if (examine == 2) {
							this.reviewStatus = '您的公司认证失败'
						}
							
						
					}
					
					this.enterChange()
					
				})
				.catch(e => {
					console.log(e)
				})
			},
			
			enterChange() {
				let type = this.pageType
				if (type == 0) {
					this.enterText = "确认提交";
				} else if (type == 1) {
					this.enterText = "再次编辑";
				} else if (type == 2) {
					this.enterText = "再次提交审核"
				}
			},
			
			enter(pageType) {
				
				if (pageType == 1) {
					this.pageType = 2;
					this.enterChange()
					return
				} 
				
				let is_update = "0"
				if (pageType == 2) {
					is_update = "1"
				}
				
				let params = {
					"users_id": this.userId,
					"company_name":this.companyName,
					"company_address":this.locationName,
					"address_supplement":this.locationAddress_suplement,
					"accurate_address": this.locationAddress,
					"long": this.longitude,
					"lat":this.latitude,
					"position":this.jobTitle,
					"cover_url":this.coverUrl,
					"cover": this.cover,
					"city": this.city,
					"is_update": is_update
			     }
				 
				 console.log("============")
				 console.log(params)
				 
				addCompany(params)
				.then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000,
					})
					
					if (res.code == 0) {
						
						clearTimeout(this.timer);  //清除延迟执行
						this.timer = setTimeout(()=>{   //设置延迟执行
						
							uni.navigateBack()
						
						}, 3000);
					}
				})
				.catch(e => {
					
				})
			},
			
			getLocation() {
				if (this.pageType == 1) {
					return
				}
				
				uni.chooseLocation({
					success: (res) => {
						this.hasLocation = true,
						// this.location = formatLocation(res.longitude, res.latitude),
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.locationName = res.name
						this.locationAddress = res.address
						this.city = res.address.substr(0, 3)
						
					},
					fail: (error) => {
						console.log("==================" + JSON.stringify(error))
					}
				})
			},
			
			selectedJob(item) {
				this.jobTitle = this.jobList[item-1].name
				this.closeDrawer('showRight')
			},
			
			enterCustomJob() {
				if (this.customJobTitle) {
					this.jobTitle = this.customJobTitle
				}
				this.closeDrawer('showRight')
			},
			
			getJobTitle(e) {
				if (this.pageType == 1) {
					return
				}
				this.$refs[e].open()

			},
			

			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
			},
			//中断上传并删除
			mediaDelete(e) {
				this.$utils.log("打印中断方法打印的eeeee   " + JSON.stringify(e))
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e, 1)
				this.coverUrl = ""
				this.cover = ""
			},

			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				urlList.forEach((item) => {
					var that = this
					this.uploadTask = uni.uploadFile({
						url: 'https://api.cst365.top/V1/common/uploadPictures',
						filePath: item.src,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (!data.data.url) {
								item.status = 'error'
								item.progress = '上传失败'
							} else {
								item.status = 'success'
								item.progress = '上传成功'
								item.src = data.data.url
								item.path = data.data.path
								var str = JSON.stringify(item);
								const jsonObj = JSON.parse(str.replace(/\\\\\\\\/g, '\\'))

								this.$utils.log("打印选择的item" + JSON.stringify(jsonObj))
								this.coverUrl = jsonObj.src
								this.cover = jsonObj.path
							}
						}
					});
					this.uploadTask.onProgressUpdate((res) => {
						item.percent = res.progress
						this.media.splice(item.index, 1, item)
					})
				})

			},
		},
		
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
	}
</script>

<style>
	.review_status {
		width: 100%;
		height: 40px;
		background: #EDF1FF;
		opacity: 1;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #0E59EA;
		display: flex;
		align-items: center;
		padding-left: 14px;
	}

	.drawer-title {
		margin-top: 16px;
		margin-bottom: 10px;
		width: 100%;
		height: 29px;
		background-color: rgb(242, 242, 242);
		border-radius: 0px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000026;
		opacity: 1;
		padding-left: 15px;
		display: flex;
		align-items: center;
	}
	
	.job-custom {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.job-custom-btn {
		margin-left: 5px;
		margin-right: 15px;
		width: 50px;
		height: 30px;
		background: #0E59EA;
		border-radius: 7px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.example-body {
		padding: 10px;
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.info-content {
		padding-left: 15px;
		padding-bottom: 25px;
		display: flex;
		align-items: center;
		
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000026;
		opacity: 1;
	}
	.close {
		padding: 10px;
	}
	/*  */
	
	
	.location_icon {
		width: 22px;
		height: 27px;
	}
	
	.enter_btn {
		position: absolute;
		height: 47px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 7px;
		left: 24px;
		right: 24px;
		bottom: 50px;
		
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.license_img {
		margin-left: 30px;
		margin-right: 30px;
		margin-bottom: 20px;
	}
	
	.itemImg
	{
/* 		width: 33.3333%;
		height: 100px; */
		width: 217rpx;
		height: 217rpx;
		
		margin-left: 22px;
		margin-right: 30px;
		margin-bottom: 20px;
	}
	
	
	.cell_title {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.cell_right {
	}
	
	.cell_line {
		margin-left: 15px;
		margin-right: 15px;
		border: 1px solid #000000;
		opacity: 0.04;
	}
	
	.input_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}	
	
	.placeholder_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.cell {
		display: flex;
		flex-direction: column;
		/* background-color: red; */
	}
	
	.cell_content {
		display: flex;
		flex-direction: row;
		/* min-height: 60px; */
		align-items: center;
		margin-left: 14px;
		margin-right: 14px;
		padding-top: 20px;
		padding-bottom: 20px;
		/* background-color: red; */
	}
	
	.bkg {
		position: absolute;
		width: 100%;
		height: 90%;
		background-color: #F2F2F2;
	}
	
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
</style>